<template>
  <div class="contents">
    <el-form
      :inline="true"
      label-position="right"
      label-width="80px"
      :model="formInline"
    >
      <el-form-item label="创建日期:">
        <el-date-picker
          class="textwidth"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="搜索:">
        <el-input
          class="textwidth"
          v-model="formInline.user"
          placeholder="请输入客户名称、联系人、手机号"
        />
      </el-form-item>
      <el-form-item :style="{ visibility: !openCol ? 'hidden' : 'visible' }">
        <el-button type="primary">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button style="margin-left: 85px;" type="text" @click="clickOpen">
          <span :style="{ visibility: openCol ? 'hidden' : 'visible' }">
            收起
          </span>
          高级筛选
          <vab-icon :icon="openCol ? 'arrow-down-s-line' : 'arrow-up-s-line'" />
        </el-button>
      </el-form-item>
      <br />
      <div v-show="!openCol">
        <el-form-item label="单据状态:">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in opt1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="结算状态:">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in opt1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
        <br />
        <el-form-item label=" " label-width="80px">
          <el-button type="primary">查询</el-button>
          <el-button>重置</el-button>
        </el-form-item>
      </div>
    </el-form>
    <div style="padding-bottom: 16px;">
      <el-button plain>新增</el-button>
    </div>
    <el-table :data="table1" style="width: 100%;">
      <el-table-column label="费用单号" prop="date" />
      <el-table-column label="客户名称" prop="name" />
      <el-table-column label="制单人" prop="address" />
      <el-table-column label="单据金额" prop="address" />
      <el-table-column label="单据状态" prop="address" />
      <el-table-column label="结算状态" prop="address" />
      <el-table-column label="备注" prop="address" />
      <el-table-column label="操作" prop="address" />
    </el-table>
    <el-pagination
      background
      layout="total, prev, pager, next,sizes"
      :page-size="20"
      :page-sizes="[20, 30, 40, 50]"
      style="text-align: right;"
      :total="0"
    />
  </div>
</template>

<script>
  export default {
    data() {
      return {
        openCol: true,
        formInline: {
          user: '',
          region: '',
        },
        value: '',
        opt1: [],
        table1: [],
      }
    },
    methods: {
      clickOpen() {
        this.openCol = !this.openCol
      },
    },
  }
</script>

<style lang="scss">
  .contents {
    padding: 10px 20px;

    .textwidth {
      width: 215px;
    }

    .items {
      display: flex;
      align-items: center;
    }
  }
</style>
